<template>
  <div id="jichuzhexiantu" ref="chartRef" class="chart" style="width: 100%; height:100%"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";

// 获取深色模式全局状态
import {storeVuex} from '@/store/modules/user'
import {storeToRefs} from "pinia";
import {onMounted, watch} from "vue";
//storeToRefs设置为响应式状态
const isDarkMode = storeToRefs(storeVuex())
let myChart:any = null; // 存储 ECharts 实例
const initChart = ()=>{
  const chartDom = document.getElementById('jichuzhexiantu');
  // 如果 myChart 已经初始化了，则先销毁
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(chartDom, isDarkMode.isDarkMode.value ? 'dark' : 'light');
  let information = {
    legend: [
      "牛肉",
      "羊肉",
      "副产品",
      "骨头",
    ],
    colorArrays: ["#1890ff", "#a0d911", "#fa541c", "#722ed1"],
    dataArray: [
      [172, 47, 117, 192, 323, 251, 195, 359, 9, 211, 277, 242, 292, 87, 70],
      [472, 88, 396, 314, 193, 486, 39, 87, 174, 88, 337, 165, 25, 333, 72],
      [
        265, 404, 115, 464, 243, 197, 335, 431, 448, 338, 99, 472, 177, 243,
        285,
      ],
      [147, 147, 398, 423, 288, 449, 265, 185, 127, 32, 31, 202, 244, 151, 163],
    ],
    // 日期，不知道要几天的
    area: [
      "2024-03-01",
      "2024-03-02",
      "2024-03-03",
      "2024-03-04",
      "2024-03-05",
      "2024-03-06",
      "2024-03-07",
      "2024-03-08",
      "2024-03-09",
      "2024-03-10",
      "2024-03-11",
      "2024-03-12",
      "2024-03-13",
      "2024-03-14",
      "2024-03-15",
    ],
  };
  let option = {
    grid: {
      left: "3%",
      right: "3%",
      bottom: "5%",
      top: "5%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(9,40,84,0.8)",
      borderColor: "rgba(9,40,84,0.8)",
      textStyle: {
        fontSize: 20,
        color: "#fff",
      },
      formatter: function (params) {
        // 加x轴名称
        var res = params[0].name + "<br/><div style=''>";
        for (var i = 0, l = params.length; i < l; i++) {
          // 创建 marker 标签
          var color = params[i].color; // 获取系列颜色
          res +=
              "<div style='display:flex; justify-content:space-between;'><div><span style='margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background-color:" +
              color +
              ";'></span>";
          res +=
              params[i].seriesName +
              "</div>&nbsp;&nbsp;&nbsp;&nbsp;" +
              "<span style='font-weight: bold;'>" +
              params[i].value +
              "</span></div>";
        }
        res += "</div>";
        return res;
      },
    },
    legend: {
      show: true,
      x: "center",
      y: "2",
      icon: "rect",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        //图例文字的样式
        color: "#9492a9",
        fontSize: 14,
        // 给出高度和rich对象，实现图标与文字居中对齐
        height: 12,
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
      },
      itemStyle: {
        borderWidth: 0,
      },
      data: information.legend,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#9492a9",
        fontSize: 14,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(180, 228, 255, 0.3)",
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        interval: information.area.length,
        lineStyle: {
          color: "rgba(180, 228, 255, 0.1)",
          width: 1,
        },
      },
      data: information.area,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}",
        color: "#9492a9",
        fontSize: 14,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(180, 228, 255, 0.3)",
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(180, 228, 255, 0.1)",
        },
      },
    },
    series: [],
  };
  for (var i = 0; i < information.legend.length; i++) {
    let index = Math.floor(Math.random() * information.area.length);
    option.series.push(
        {
          name: information.legend[i],
          type: "line",
          symbol: "circle",
          smooth: true, //是否平滑
          symbolSize: 10,
          itemStyle: {
            color: information.colorArrays[i],
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          data: information.dataArray[i],
        },
        {
          name: information.legend[i],
          // 设置涟漪特效动画
          type: "effectScatter",
          // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
          coordinateSystem: "cartesian2d",
          // 单个闪烁点 ↓
          // data: [{value:[xData[4],item.data[4]],symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小]
          data: [
            {
              value: [information.area[index], information.dataArray[i][index]],
              symbolSize: 10,
            },
          ], //2d坐标系--[x轴, y轴, 标记大小]
          // data: cart, //2d坐标系--[x轴, y轴, 标记大小]
          // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
          showEffectOn: "render",
          // 涟漪特效配置
          rippleEffect: {
            // 波纹的绘制方式,可选'stroke'和'fill'
            brushType: "fill",
            number: 5,
            period: 3,
            scale: 3,
          },
          emphasis: {
            scale: true,
          },
          itemStyle: {
            color: information.colorArrays[i],
            shadowBlur: 50,
            shadowColor: "#fff",
          },
          zlevel: 1,
          tooltip: {
            show: false,
          },
        }
    );
  }
  myChart.setOption(option);
}
// 监听echarts的深色模式 主题变化
// watch(() => isDarkMode.isDarkMode.value, () => {
//   initChart(); // 重新初始化图表
// });
watch(
    [
      () => isDarkMode.isDarkMode.value,
      () => isDarkMode.isEcharts.value
    ],
    ([newDarkMode, newEchartsStatus]) => {
      // 如果深色模式变化
      if (newDarkMode !== undefined) {
        initChart(); // 重新初始化图表
      }
      // 如果导航栏隐藏状态变化
      if (newEchartsStatus !== undefined) {
        setTimeout(() => {
          updatewidth(); // 调整图表大小
        }, 1000);
      }
    }
);
const updatewidth = ()=>{
  myChart.resize();
}
onMounted(() => {
  initChart();
  // window.addEventListener('resize', updatewidth)
});
</script>
<style scoped>

</style>
